<template>
  <div>
    <transition name="comments-input">
      <div v-if="isShow" class="comments-input" :class="{'comments-input-padding-top': paddingTop}">
        <a-textarea
          v-model="commentsContent"
          placeholder="写下您的评论..."
          :auto-size="{ minRows: 4, maxRows: 4 }"
        />
        <div class="bottom-box w-flex-between-center">
          <div class="left">
            <a-popover>
              <template slot="content">
                <VEmojiPicker :emojis-by-row="8" :show-search="false" @select="selectEmoji" />
              </template>
              <a-icon class="emoji w-pointer" type="smile" />
            </a-popover>
          </div>
          <div class="right">
            <a-button type="danger" shape="round" :disabled="!commentsContent" :loading="loading" @click="okClick">
              发表
            </a-button>
            <a-button shape="round" @click="hide">
              取消
            </a-button>
          </div>
        </div>
      </div>
    </transition>
    <check-login ref="CheckLogin"/>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'
import { VEmojiPicker } from 'v-emoji-picker'
import { State } from 'vuex-class'
import CheckLogin from '@/components/OAuth/checkLogin'

@Component({
  name: 'GlobalCommentsInput',
  components: {
    VEmojiPicker,
    CheckLogin
  }
})
export default class Com extends Vue {
  @Prop({ type: String, default: '' }) commentId!: string
  @Prop({ type: String }) api!: string
  @Prop({ type: String, default: '' }) mention!: string
  @Prop({ type: Boolean, default: false }) paddingTop!: boolean

  @State('oauth') OAuth: any;
  commentsContent = ''
  loading = false
  isShow = false

  selectEmoji (emoji: any) {
    this.commentsContent = this.commentsContent += emoji.data
  }

  show () {
    if ((this.$refs.CheckLogin as any).check(true)) {
      this.commentsContent = ''
      this.isShow = true
    }
  }

  hide () {
    this.isShow = false
  }

  okClick () {
    this.loading = true
    this.$wAxios.$post(`${this.api}${this.$route.params.id}`, {
      icon: this.OAuth.icon,
      name: this.OAuth.name,
      userId: this.OAuth.userId,
      content: this.commentsContent,
      mention: this.mention || undefined,
      superCommentId: this.commentId || undefined
    }).then(() => {
      this.commentsContent = ''
      this.$message.success('评论成功')
      this.$emit('reload')
    }).finally(() => {
      this.loading = false
    })
  }
}
</script>

<style scoped lang="less">
.comments-input {
  height: 146px;
  overflow: hidden;
  .bottom-box {
    padding: 10px 0;
  }

  .emoji {
    font-size: 16px;
    color: #b0b0b0;
  }

  .emoji:hover {
    color: #999;
  }
}
.comments-input-padding-top {
  padding-top: 10px;
}
</style>
<style>
.comments-input-enter-active {
  animation: bounce-in .5s;
}
.comments-input-leave-active {
  animation: bounce-leave .5s;
}
@keyframes bounce-in {
  0% {
    height: 0;
  }
  100% {
    height: 146px;
  }
}
@keyframes bounce-leave {
  0% {
    height: 146px;
  }
  100% {
    height: 0px;
  }
}
</style>
